---
title: "css"
description: "The css function provides a way to define styles using tagged template literals and generates a unique className that you can apply to your components. "
---

import { ThisIsTheCSS, ExampleContainer } from "../../../components/example";
import { Callout } from "nextra-theme-docs";

# css

Kuma UI's `css` function allows you to define styles using tagged template literals, generating a unique className that you can apply to your components. This syntax is similar to the one used with the styled API, making it a familiar choice for developers.

<Callout type="warning">
  Please note that the css API does not currently support interpolations in the
  same way as libraries like Emotion does. However, we are actively working to
  incorporate this feature, so stay tuned for updates.
</Callout>

## Import

```ts copy
import { css } from "@kuma-ui/core";
```

## Usage

<ExampleContainer>
  <ThisIsTheCSS />
</ExampleContainer>

```tsx copy
export const ThisIsTheCSS = () => {
  return (
    <div
      className={css`
        color: white;
        padding: 8px;
        background: blue;
      `}
    >
      hello world
    </div>
  );
};
```

In this example, the `css` function defines a set of styles, generating a className that we then apply to the div component.

### Use `cx` to Combine Multiple Sets of Styles

You can use `cx` to merge multiple style declarations. This is particularly useful for conditional `css` declarations or when importing and combining different style sets.

```tsx copy
import { css, cx } from "@kuma-ui/core";
import { resetStyles } from "../my-theme";

export const ThisIsTheCSS = () => {
  const isLoggedIn = true;

  return (
    <div
      className={cx(
        resetStyles,
        css`
          color: white;
          padding: 8px;
          background: blue;
        `,
        isLoggedIn &&
          css`
            color: red;
          `,
      )}
    >
      hello world
    </div>
  );
};
```

## Using Theme Tokens

You can also utilize [theme tokens](/docs/Theme/ThemeTokens) directly within your `css` function. This allows for a more cohesive and centralized way to manage your design values. Here's how you can use it:

```tsx
<div
  className={css`
    color: t("colors.primary");
  `}
/>
```

In the above example, `t("colors.primary")` fetches the primary color defined in your theme tokens, making it easier to maintain a consistent design across your application.

## Handling Dynamic Styles

While Kuma UI supports dynamic values for styled props like the one shown below, they are processed at runtime and hence might not be as performance-friendly:

```tsx copy
const [isPressed, setPressed] = useState(false);
const onClick = () => setPressed(true);

return <Box color={isPressed ? "red" : "blue"}></Box>;
```

For better performance, we recommend defining your dynamic styles with the css API like so:

```tsx copy
const [isPressed, setPressed] = useState(false);
const onClick = () => setPressed(true);

return (
  <Box
    className={
      isPressed
        ? css`
            color: red;
          `
        : css`
            color: blue;
          `
    }
  ></Box>
);
```

In this case, the styles are generated statically at build time, which is more performance-friendly. Thus, you can use the `css` API to handle both static and dynamic styles efficiently.
